<template>
  <div class="c-box-title g-flex-start-center" :class="titleClass">
    <span class="g-font-14n1b500">{{ props.title }}</span>
  </div>
</template>
<script lang="ts" setup name="CBoxTitle">
import { defineProps, withDefaults, computed } from 'vue';
interface CBoxTitlePropsType {
  title: string;
  hasPadding?: boolean;
}
const props = withDefaults(defineProps<CBoxTitlePropsType>(), {
  hasPadding: true
});

const titleClass = computed(() => {
  const cls: string[] = [];
  if (props.hasPadding) {
    cls.push('c-box-title--padding');
  }
  return cls;
});
</script>
<style lang="scss" scoped>
.c-box-title {
  width: 100%;
  height: 44px;
  &.c-box-title--padding {
    padding: 0 24px;
  }
}
</style>
